<template>
  <div id="right-pie">
    <div class="title">异常统计</div>
    <div id="echarts-pie">
      <div id="one"></div>
      <div id="two"></div>
      <div id="three"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "rightPie",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawMyChart();
    this.drawMyChart1();
    this.drawMyChart2();
  },
  methods: {
    // 左
    drawMyChart() {
      var myChart = this.$echarts.init(document.getElementById("one"));
      console.log(myChart);

      var option = {
        tooltip: {
          show: true, // 是否显示提示框，默认为true
        },
        series: [
          //内值 百分比
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            progress: { show: true, width: 5, color: "#00227d" },
            axisLabel: { show: false },
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                // color: [ [80 / 100, "#00217D"],[1, "#00217D"] ],//根据实际数据动态改变
                color: [[1, "#80E6FF"]],
                width: 5, //半径
                shadowColor: "#4bf3f9", //默认透明
                shadowBlur: 5,
              },
            },
            pointer: { show: false },
            axisTick: {
              // 坐标轴小标记
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "transparent", //坐标轴 小刻度线颜色
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            splitLine: {
              // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 30,
                color: "transparent", //分割线
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            detail: {
              show: true,
              borderColor: "#fff",
              shadowColor: "#fff", //默认透明
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "200",
                fontSize: 20,
                color: "#80E6FF ",
              },
              formatter: "{value}{per|%}",
              rich: {
                per: { fontSize: 12, color: "#80E6FF " },
              },
              offsetCenter: ["0", "5%"],
            },
            data: [{ value: 20 }],
          },
          // 外圈
          {
            type: "gauge",
            radius: "55%",
            startAngle: 90,
            endAngle: -270,
            axisLabel: { show: false },
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [80 / 100, "#00217D"],
                  [1, "#00217D"],
                ], //根据实际数据动态改变
                width: 1,
                shadowColor: "#1F4088", //默认透明
                shadowBlur: 4,
              },
            },
            pointer: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            detail: { show: false },
            data: [{ value: 100 }],
          },
        ],
      };
      myChart.setOption(option);
    },
    // 中
    drawMyChart1() {
      var myChart = this.$echarts.init(document.getElementById("two"));
      console.log(myChart);

      var option = {
        tooltip: {
          show: true, // 是否显示提示框，默认为true
        },
        series: [
          //内值 百分比
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            progress: { show: true, width: 5, color: "#00227d" },
            axisLabel: { show: false },
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                // color: [ [80 / 100, "#00217D"],[1, "#00217D"] ],//根据实际数据动态改变
                color: [[1, "#FFBA69 "]],
                width: 5, //半径
                shadowColor: "#4bf3f9", //默认透明
                shadowBlur: 5,
              },
            },
            pointer: { show: false },
            axisTick: {
              // 坐标轴小标记
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "transparent", //坐标轴 小刻度线颜色
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            splitLine: {
              // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 30,
                color: "transparent", //分割线
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            detail: {
              show: true,
              borderColor: "#fff",
              shadowColor: "#fff", //默认透明
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "200",
                fontSize: 20,
                color: "#80E6FF ",
              },
              formatter: "{value}{per|%}",
              rich: {
                per: { fontSize: 12, color: "#80E6FF " },
              },
              offsetCenter: ["0", "5%"],
            },
            data: [{ value: 20 }],
          },
          // 外圈
          {
            type: "gauge",
            radius: "55%",
            startAngle: 90,
            endAngle: -270,
            axisLabel: { show: false },
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [80 / 100, "#00217D"],
                  [1, "#00217D"],
                ], //根据实际数据动态改变
                width: 1,
                shadowColor: "#1F4088", //默认透明
                shadowBlur: 4,
              },
            },
            pointer: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            detail: { show: false },
            data: [{ value: 100 }],
          },
        ],
      };
      myChart.setOption(option);
    },
    // 右
    drawMyChart2() {
      var myChart = this.$echarts.init(document.getElementById("three"));
      console.log(myChart);

      var option = {
        tooltip: {
          show: true, // 是否显示提示框，默认为true
        },
        series: [
          //内值 百分比
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            progress: { show: true, width: 5, color: "#00227d" },
            axisLabel: { show: false },

            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                // color: [ [80 / 100, "#00217D"],[1, "#00217D"] ],//根据实际数据动态改变
                color: [[1, "#FF7F7C"]],
                width: 5, //半径
                shadowColor: "#4bf3f9", //默认透明
                shadowBlur: 5,
              },
            },
            pointer: { show: false },
            axisTick: {
              // 坐标轴小标记
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "transparent", //坐标轴 小刻度线颜色
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            splitLine: {
              // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 30,
                color: "transparent", //分割线
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            detail: {
              show: true,
              borderColor: "#fff",
              shadowColor: "#fff", //默认透明
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "200",
                fontSize: 20,
                color: "#80E6FF ",
              },
              formatter: "{value}{per|%}",
              rich: {
                per: { fontSize: 12, color: "#80E6FF " },
              },
              offsetCenter: ["0", "5%"],
            },
            data: [{ value: 20 }],
          },
          // 外圈
          {
            type: "gauge",
            radius: "55%",
            startAngle: 90,
            endAngle: -270,
            axisLabel: { show: false },
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [80 / 100, "#00217D"],
                  [1, "#00217D"],
                ], //根据实际数据动态改变
                width: 1,
                shadowColor: "#1F4088", //默认透明
                shadowBlur: 4,
              },
            },
            pointer: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            detail: { show: false },
            data: [{ value: 100 }],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
#right-pie {
  width: 100%;
  height: 45%;
  /* background: pink; */
  margin-top: 20px;
}
#echarts-pie {
  background: #0e378b;
  /* opacity: 0.5; */
  width: 100%;
  height: 90%;
  display: flex;
}
#one,
#two,
#three {
  flex: 1;
  height: 80%;
}
</style>
